<template>
  <div class="query">
    <a-date-picker
      :show-time="timeOptions"
      format="YYYY-MM-DD HH:mm"
      v-model:value="timePoint"
      :disabled-date="disabledDate"
      :disabled-time="disabledRangeTime"
    />
    <a-button @click="query" class="query_btn">搜索</a-button>
    <a-button @click="reset" class="reset_btn">重置</a-button>
  </div>
</template>
<script setup>
import { ref, defineExpose, defineEmits } from 'vue';
import moment from 'moment';
import { getYesterdayCurrentTime } from '@/utils/util';
import { message } from 'ant-design-vue';
const emit = defineEmits(['timeQuery']);
const defaultTime = getDefaultTime();
const timePoint = ref(moment(defaultTime));
const timeOptions = ref({
  minuteStep: 5,
  format: 'HH:mm'
});

const disabledDate = (current) => {
  const now = moment().endOf('day').valueOf() - 24*60*60*1000;
  return current && (current.valueOf() > now );
};

const disabledRangeTime = () => {
  return {
    disabledMinutes:() => getDisabledMinutes()
  };
};

const getDisabledMinutes = () =>{
  const result = []
  for(let i = 0; i < 60; i++){
    if(i%5 !== 0) result.push(i);
  }
  return result
}
/** 搜索 */
const query = () => {
  const _time = timePoint.value;
  if (_time) {
    emit('timeQuery', getTimeRange());
  } else {
    message.warning('请选择时间范围！');
  }
};
/** 重置 */
const reset = () => {
  timePoint.value = moment(getDefaultTime());
  emit('timeQuery', getTimeRange());
};

/** 获取默认时间 */
function getDefaultTime () {
  const yesterdayCurrentTime = getYesterdayCurrentTime();
  const yesDateStr = moment(yesterdayCurrentTime).format('YYYY-MM-DD HH');
  let minute = yesterdayCurrentTime.getMinutes();
  minute = minute - minute % 5;
  minute = minute > 9 ? minute : ('0' + minute);
  return yesDateStr + ':' + minute;
}

/** 获取当前请求时间范围 */
const getTimeRange = () => {
  const time = timePoint.value;
  const v = time.valueOf();
  const start = moment(v-5*60*1000);
  return {
    startTime: start.format('YYYY-MM-DD HH:mm:ss'),
    endTime: time.format('YYYY-MM-DD HH:mm:ss')
  }
};

defineExpose({
  getTimeRange,
  getDefaultTime
});
</script>
<style lang="less" scoped>
.query {
  display: flex;
  gap: 10px;
}
.reset_btn {
  width: 72px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(11, 60, 100, 0.5);
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #0b3c64;
  cursor: pointer;
}
.query_btn {
  width: 72px;
  background: #56d3ff;
  border-radius: 5px 5px 5px 5px;
  background: linear-gradient(180deg, #56a5ff 0%, #256691 49%, #1d4d82 100%);
  opacity: 1;
  border: 1px solid #0b3c64;
  color: white;
  cursor: pointer;
}
/deep/ .ant-calendar-picker-input {
  background-color: rgba(11, 60, 100, 0.5);
}
/deep/ .ant-input {
  border: 1px solid #0b3c64;
  color: rgba(255, 255, 255, 0.85);
}

/deep/ .ant-calendar-range-picker-separator {
  color: rgba(255, 255, 255, 0.85);
}

/deep/ .ant-calendar-picker-clear {
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
}
</style>
